<!--我参与的文档-->
<template>
    <div>
        <!--功能栏-->
        <div>
            <document-toolbar @search="showTableData = $event"
                              @search-total="total = $event"
                              :del-tag = 1
                              :page-num = this.pageIndex
                              :page-size = this.pageSize
            >
            </document-toolbar>
        </div>

        <!--用户列表-->
        <el-table :data="showTableData" stripe style="width: 100%">
            <el-table-column prop="userid" label="序号" width="200"></el-table-column>
            <el-table-column prop="userimg" label="用户头像" width="200">
                <template v-slot:default="scope">
                    <img v-if="scope.row.userimg" :src="scope.row.userimg" style="width: 50px; height: 50px;">
                    <img v-else src="../assets/avatar.png" style="width: 50px; height: 50px;">
                </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="200"></el-table-column>
            <el-table-column prop="phone" label="电话" width="200"></el-table-column>
            <el-table-column prop="usersex" label="性别" width="200">
                <template v-slot:default="scope">
                    <span>{{ scope.row.usersex === 1 ? '男' : '女' }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template v-slot:default="scope">
                    <el-popconfirm
                        confirm-button-text='确认！'
                        cancel-button-text='点错了~'
                        icon="el-icon-info"
                        icon-color="red"
                        title="确认将该用户加入黑名单？"
                        @confirm="prohibitUser(scope.row)"
                    >
                        <el-button size="mini" type="danger" icon="el-icon-delete" slot="reference">禁用</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-size="pageSize"
            :page-sizes="[5, 10, 20, 50]"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import DocumentToolbar from "@/components/DocumentToolbar";

export default {
    name: "UserManagement",
    components:{
        DocumentToolbar
    },
    data() {
        return {
            userList: [],
            /***分页变量****/
            pageIndex: 1, // 第几页
            pageSize: 5, // 每页几条数据
            total: 0, // 总条目数
            showTableData: [], // 当前展示的数据
        }
    },
    created() {
        this.getAllUser()
    },
    mounted() {
        //在组件被挂载到DOM后执行,在这里中,使用setTimeout()函数来延迟0.5秒执行代码块内的逻辑
        setTimeout(() => {
            // 获取总条目数
            this.total = this.userList.length;
            // 根据当前是第几页、每页展示几条，去截取需要展示的数据
            this.getShowTableData();
            console.log(this.showTableData)
        }, 500);
    },
    methods: {
        //获取所有用户信息
        getAllUser(){
            this.axios.get('/back_system_user/getAllUser', {
            })
                .then(response => {
                    console.log(response.data)//测试
                    this.userList = response.data.data
                })
                .catch(error => {
                    // console.log(error)
                    this.$message.info(error.data)
                })
        },

        //将用户加入黑名单
        prohibitUser(row){
            console.log(row)
            this.axios.delete('/back_system_user/prohibitUser', {
                params: {
                    userId: row.userid,
                }
            })
                .then(response => {
                    console.log(response.data)
                    this.$message.success(response.data.msg)
                })
                .catch(error => {
                    console.log(error.response.data)
                    this.$message.error("失败！")
                })
        },

        /********************分页*******************/
        //获取当前页数据
        getShowTableData() {
            // 获取截取开始索引
            let begin = (this.pageIndex - 1) * this.pageSize;
            // 获取截取结束索引
            let end = this.pageIndex * this.pageSize;
            // 通过索引去截取当前页要展示的数据
            this.showTableData = this.userList.slice(begin, end);
            // console.log(this.showTableData)
        },
        // 当前页数改变，重新截取
        handleCurrentChange(currentPage) {
            // console.log(currentPage)
            this.pageIndex = currentPage;
            this.getShowTableData();
        },
        // 每个页面条目数改变，重新截取
        handleSizeChange(pageSize) {
            // console.log(pageSize)
            this.pageIndex = 1;
            this.pageSize = pageSize;
            this.getShowTableData();
        },

        //设置时间格式
        dateFormat(row, column) {
            // console.log(row[column.property])//测试
            let date = row[column.property];
            if (date == undefined) {
                return "";
            }
            return this.$moment(date).format("YYYY-MM-DD");
        },
    }
}
</script>

<style scoped>

</style>
